import Layout from './Layout'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import Search from './Search'
import { Col, Row, Typography } from 'antd'
import ProductItem from './ProductItem'
import { getProduct } from '../../store/actions/product.action'
import { AppState } from '../../store/reducers'
const Home = () => {
    const {
        product:{
            createdAt,
            sold
        }
       
    } = useSelector<AppState, AppState>(state => state)
     
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getProduct('createdAt'))
        dispatch(getProduct('sold'))
        return () => {
            
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    return (
        <Layout title="拉勾商城" subTitle="首页">
            <Search />
            <Typography.Title level={5}>最新上架</Typography.Title>
            <Row gutter={[16, 16]}>
                {
                    createdAt.result.map((item, index) => (
                        <Col span="6" key={index}>
                            <ProductItem product={item} key={item._id} />
                        </Col>
                    ))
                }
                
            </Row>
            <Typography.Title level={5}>最新欢迎</Typography.Title>

            <Row gutter={[16, 16]}>
                {
                    sold.result.map((item, index) => (
                        <Col span="6" key={index}>
                            <ProductItem product={item} key={item._id}/>
                        </Col>
                    ))
                }
            </Row>
        </Layout>
    )
}

export default Home
